<template>
    <div class="swerper">
            
        <div class="swerper-v" :style="{width:list.length*100+'%',transform: 'translateX(-'+(100/list.length)*swerper_index+'%)',transition:change_time?((obj.duration/1000||1.5)+'s'):''}" >
            <img v-for="(item,index) in list" :key="index" :style="{width:100/list.length+'%'}" class="top-img" :src="item.src" />
        </div>
        <div class="swerper-dian">
            <div v-for="(item,index) in list.length" :key="index" v-show="index!=0 && index!=(list.length-1)"
                :class="(swerper_item_index == index)?'swerper-dian-xiao swerper-dian-da':'swerper-dian-xiao'" 
                :style="{transition:obj.duration>=0?((obj.duration/1000||1.5)+'s'):''}"
                @click.stop="chooseSwerper(index)"
                ></div>
        </div>
    </div>
</template>
<script>

export default {
    props:{
        list:{
            type:Array,
        },
        obj:{
            type:Object,
        }
    },
    data () {
      return {
        change_time:true,
        swerper_index:1,
        time1:0,
        time2:0,
        swerper_item_index:1,
        swerper_time:0,
      }
    },
    mounted(){
        this.startSwerper();
    },
    methods: {
        startSwerper(){  //轮播自动切换
            this.swerper_time = setInterval((item)=>{
  
                    this.swerper_index += 1;
                    if(this.swerper_index == this.list.length-1){
                        this.swerper_item_index = 1;
                        this.time1 = setTimeout(()=>{
                            this.change_time = false;
                            this.swerper_index = 1;
                            clearTimeout(this.time1);
                        },this.obj.duration||1500);
                        this.time2 = setTimeout(()=>{
                            this.change_time = true;
                            clearTimeout(this.time2);
                        },(this.obj.duration||1500)*2);
                    }else{
                        this.swerper_item_index += 1;
                    }
                
            },this.obj.interval||8000);
        },
        chooseSwerper(e){  //轮播点击按钮切换
            this.change_time = true;
            this.swerper_item_index = e;
            this.swerper_index = e;
            clearTimeout(this.time1);
            clearTimeout(this.time2);
            clearInterval(this.swerper_time);  //点击后重新计时切换
            this.startSwerper();
        },
　　}
}
</script>

<style scoped lang="less">
.swerper{
    position:relative;
    width:100%;
    overflow:hidden;
    &-v{
        position:relative;
        .swerper-show{
            position:absolute;
            top:0;
            padding-left:120px;
            display:flex;
            height:100%;
            flex-direction: column;
            justify-content: center;
            color: #FFFFFF;
            .swerper-show-t{
                font-size:40px;
                font-weight:600;
            }
            .swerper-show-c{
                width: 50px;
                height: 3px;
                margin:20px 0 40px;
                background: #FFFFFF;
            }
            .swerper-show-f{
                
            }
        }
    }
    .top-img{
        height:auto;
    }
    &-dian{
        position:absolute;
        bottom:20px;
        left:0;
        display:flex;
        justify-content: center;
        width:100%;
        .swerper-dian-xiao{
            width: 20px;
            height: 6px;
            margin:0 10px;
            background: #4383D2;
        }
        .swerper-dian-da{
            width: 70px;
            background: #FFFFFF;
        }
    }
}
</style>